<template>
  <view class="historyList">
    <view class="item" v-for="item in listOPT.list" :key="item.id">
      <view class="title">{{item.activityName}}</view>
      <view class="content">
        <image class="img" mode="aspectFill" :src="item.coverImage"></image>
        <view class="over">
          <text class="text">活动已结束</text>
        </view>
      </view>
    </view>
    <view class="isLoading" v-if="!listOPT.loaded">
      <view class="icon">
        <uni-icons type="spinner-cycle" class="rotate" size="22"></uni-icons>
      </view>
      <view class="text">正在加载…</view>
    </view>
    <view class="noData" v-else-if="!listOPT.more && !listOPT.list?.length">
      <image class="img" mode="aspectFill" src="https://img.qumoyugo.com/webimgbg/activity_history_empty_20221101.png"></image>
      <view class="text">暂无发布哟~</view>
    </view>
    <view class="noMore" v-else-if="!listOPT.more">
      <text class="text">没有更多了~</text>
    </view>
  </view>
</template>

<script setup>
import { onReachBottom, onShow } from '@dcloudio/uni-app'
import { ref, getCurrentInstance } from 'vue'
const { $https } = getCurrentInstance().appContext.config.globalProperties
onShow(() => {
  getAcitivityHistoryList(true)
})
onReachBottom(() => {
  if (listOPT.value.more) {
    getAcitivityHistoryList()
  }
})
const listOPT = ref({
  list: [],
  query: {
    page: 1,
    pageSize: 5
  },
  more: true,
  loaded: false
})
const getAcitivityHistoryList = (init) => {
  if (init) {
    listOPT.value.list = []
    listOPT.value.query.page = 1
    listOPT.value.loaded = false
    listOPT.value.more = true
  }
  $https({
    url: '/taskActivity/expired/list',
    type: 'ac',
    method: 'get',
    data: { ...listOPT.value.query }
  }).then(res => {
    if (res.code === 0) {
      listOPT.value.list.push(...(res.data.items || []))
      listOPT.value.loaded = true
      listOPT.value.more = res.data.pagination?.more
      if (listOPT.value.more) {
        listOPT.value.query.page = listOPT.value.query.page + 1
      }
    }
  })
}
</script>

<style scoped lang="scss">
.historyList{
  padding: 0 24rpx;
  background-color: #F9F9F9;
  .item{
    padding: 24rpx 20rpx;
    border-radius: 12rpx;
    background-color: #ffffff;
    margin-top: 24rpx;
    .title{
      padding-bottom: 24rpx;
      font-size: 30rpx;
      color: #333333;
      font-weight: bold;
    }
    .content{
      position: relative;
      width: 100%;
      height: 222rpx;
      .img{
        width: 100%;
        height: 100%;
        border-radius: 12rpx;
      }
      .over{
        top: 0;
        left: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        .text{
          display: inline-block;
          background-color: #7A7A7A;
          padding: 4rpx 24rpx;
          border-radius: 12rpx;
          color: #FFFFFF;
        }
      }
    }
  }
}
.isLoading{
  text-align: center;
  color: #aaaaaa;
  padding: 120rpx 0;
  font-size: 24rpx;
  .icon{
    animation: rotate1 3s linear infinite;
  }
}
.noData{
  text-align: center;
  color: #aaaaaa;
  padding: 120rpx 0;
  font-size: 24rpx;
  .img{
    width: 257rpx;
    height: 217rpx;
  }
}
.noMore{
  text-align: center;
  color: #aaaaaa;
  padding: 24rpx 0;
  font-size: 24rpx;
}
@keyframes rotate1 {
  from{
    transform: rotateZ(0deg);
  }
  to{
    transform: rotateZ(360deg);
  }
}
</style>
